<template>
  <div>
    <!-- 沉寂库商机详情 -->
    <Tabs v-model="active" @change="changetab">
      <Tab title="商机信息" name="seaInfoDetail"
        ><seaInfoDetail
          :detailType="detailType"
          ref="seaInfoDetail"
        ></seaInfoDetail
      ></Tab>
      <Tab title="KP信息" name="KPinfoDetail"
        ><KPinfoDetail ref="KPinfoDetail"
      /></Tab>
      <Tab title="跟进信息" name="followInfoDetail"
        ><followInfoDetail
          :detailType="detailType"
          ref="followInfoDetail"
        ></followInfoDetail
      ></Tab>
      <Tab title="店铺信息" name="shopInfoDeatail"
        ><shopInfoDeatail
          :detailType="detailType"
          ref="shopInfoDeatail"
        ></shopInfoDeatail
      ></Tab>
      <Tab title="合同信息" name="contractInfoDetail"
        ><contractInfoDetail
          :detailType="detailType"
          ref="contractInfoDetail"
        ></contractInfoDetail
      ></Tab>
    </Tabs>
  </div>
</template>

<script>
import { Tab, Tabs } from "vant";
import seaInfoDetail from "../components/seaInfoDetail.vue";
import followInfoDetail from "../components/followInfoDetail.vue";
import shopInfoDeatail from "../components/shopInfoDeatail.vue";
import contractInfoDetail from "../components/contractInfoDetail.vue";
import KPinfoDetail from "../components/KPinfoDetail.vue";

export default {
  components: {
    Tab,
    Tabs,
    seaInfoDetail,
    followInfoDetail,
    shopInfoDeatail,
    contractInfoDetail,
    KPinfoDetail,
  },
  data() {
    return {
      active: "seaInfoDetail",
      detailType: "沉寂库",
      id: "",
    };
  },
  activated() {
    this.active = "seaInfoDetail";
    if (this.$route.query && this.$route.query.id) { 
      this.id = Number(this.$route.query.id);
      this.changetab();
    }
  },
  methods: {
    changetab() { 
      this.$nextTick(() => {
        this.$refs[this.active].change(this.id);
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
